<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
  <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
  $(function (){
      $("#btn1").click(function (){
        $(".c1").css("width","800px")
        $(".c1").css("height","400px")
        $(".c1").css("font-size", "32px");
      });
    $("#btn2").click(function (){
      $(".c1").css("width","200px")
      $(".c1").css("height","200px")
      $(".c1").css("font-size", "16px");
    });
    $("#btn3").click(function (){
      // $(".c1").css('display','none');
    //     新做法
        $(".c1").hide()
    });
    $("#btn4").click(function (){
      // $(".c1").css('display','block');
        $(".c1").show()
    });
  })
</script>
</head>
<body>
<button id="btn1">放大</button>
<button id="btn2">缩小</button>
<button id="btn3">隐藏</button>
<button id="btn4">显示</button>
<div class="c1" style="width: 20%;background-color: #dddddd" >
  <p>第1个段落</p>
  <p>第2个段落</p>
  <p>第3个段落</p>
  <p>第4个段落</p>
</div>
</body>
</html>